<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>打印服务卡</title>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<style type="text/css">
			.gig-div{
				height: 790px;
				width: 960px;
				margin: auto;
				background-color: #ededee;
			}
			.margin{
				width: 96%;
				height: 100%;
				margin: auto;
			}
			.title-div{
				height: 10%;
				width: 100%;
				text-align: center;
				line-height: 94px;
			}
			.top-div{
				height: 5%;
				width: 100%;
			}
			.top-div-left{
				float: left;
				width: 35%;
				height: 100%;
				text-align: left;
				line-height: 47.5px;
				margin-left: 15px;
			}
			.top-div-right{
				float: right;
				width: 45%;
				height: 100%;
				text-align: right;
				line-height: 47.5px;
				margin-right: 15px;
			}
			.bable-div{
				height: 65%;
				width: 100%;
			}
			table{
				border-collapse: collapse;
				text-align: center;
				width: 100%;
				height: 100%;
			}
			table td, table th{
				border: 1.5px solid #666;
				color: #666;
			}
			.bottom-div{
				height: 15%;
				width: 100%;
			}
			.bottom-div-left{
				width: 47%;
				height: 80%;
				float: left;
				text-align: left;
				line-height: 150px;
				margin-left: 15px;
			}
			.bottom-div-right{
				width: 43%;
				height: 80%;
				float: right;
				text-align: right;
				line-height: 150px;
				margin-right: 15px;
				text-align: left;
			}
			.button-div{
				height: 50px;
				width: 650px;
				margin: auto;
				text-align: center;
				line-height: 50px;
			}
			.button-submit{
				display: inline-block;
				height: 38px;
				line-height: 38px;
				padding: 0 18px;
				background-color: #009688;
				color: #fff;
				white-space: nowrap;
				text-align: center;
				font-size: 14px;
				border: none;
				border-radius: 2px;
				cursor: pointer;
			}
			.return{
				border: 1.5px solid #bdbdbd;
				background-color: #fff;
				border-color: #e6e6e6;
				color: #666;
			}
		</style>
	</head>
	<body>
		<div class="gig-div" id="printinghtml">
			<div class="margin">
				<div class="title-div"><h2 id="name"><img alt="" src="https://s1.ax1x.com/2022/04/26/L7M9aR.png">山东正鑫物流有限公司运输合同</h2></div>
				<div class="top-div">
					<div class="top-div-left">日期：<span id="dates"></span></div>
					<div class="top-div-right">运单号：<span id="orderNumber"></span></div>
					<div class="top-div-left">起点：<span id="startings"></span></div>
					<div class="top-div-right">终点：<span id="ends"></span></div>
				</div>
				<div class="bable-div">
					<table border="2px " cellspacing="" cellpadding="">
						<tr>
							<td style="color: #000000;">车牌号</td>
							<td id="carNumber"></td>
							<td style="color: #000000;">车主</td>
							<td id="v2"></td>
							<td style="color: #000000;">司机</td>
							<td id="driver"></td>
							<td style="color: #000000;">联系方式</td>
							<td id="tel"></td>
						</tr>
						<tr>
							<td style="color: #000000;">车型</td>
							<td id="carMode"></td>
							<td style="color: #000000;">货物名称</td>
							<td id="goodsName"></td>
							<td style="color: #000000;">结账周期</td>
							<td id="zhouqi"></td>
							<td style="color: #000000;">货主</td>
							<td id="v1"></td>
						</tr>
						<tr>
							<td style="color: #000000;">总运费</td>
							<td id="freight" colspan="1"></td>
							<td style="color: #000000;"colspan="1">外调车运费</td>
							<td id="waiMoney"></td>
							<td style="color: #000000;"colspan="1">付运费</td>
							<td id="fuMoney"></td>
							<td style="color: #000000;"colspan="1">信息费</td>
							<td id="informationFee"></td>
						</tr>
						<tr>
							<td style="color: #000000;">备注</td>
							<td colspan="7" id="remarks"></td>
						</tr>
					</table>
				</div>
				<div class="bottom-div">
					<div class="bottom-div-left">
						甲方（发货人）：
					</div>
					<div class="bottom-div-right">
						乙方（承运人）：
					</div>
				</div>
			</div>
		</div>
		<div class="button-div">
			<button class="button-submit" type="button" onclick="printing()">&emsp;打印&emsp;</button>
			<button class="button-submit return" type="button" onclick="backupPage()">&emsp;关闭&emsp;</button>
		</div>
	</body>
	<script type="text/javascript">
		//通过URL 获取参数
		function GetQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			var r = window.location.search.substr(1).match(reg);
			if(r != null) return unescape(r[2]);
			return null;
		};

		$.ajax({
			url:'${ctxPath}/thirdManagementStatistics/detail',
			type:'post',
			dataType:'json',
			async:false,
			data:{"id":GetQueryString("id")},
			success:function(data){
				if(data.success){
					$("#orderNumber").text(data.data.orderNumber)
					$("#dates").text(data.data.dates)
					$("#startings").text(data.data.startings)
					$("#ends").text(data.data.ends)
					$("#freight").text(data.data.freight)
					$("#informationFee").text(data.data.informationFee)
					$("#goodsName").text(data.data.goodsName)
					$("#carNumber").text(data.data.carNumber)
					$("#driver").text(data.data.driver)
					$("#tel").text(data.data.tel)
					$("#remarks").text(data.data.remarks)
					$("#v1").text(data.data.v1)
					$("#v2").text(data.data.v2)
					$("#carMode").text(data.data.carMode)
					$("#zhouqi").text(data.data.zhouqi)
					$("#waiMoney").text(data.data.waiMoney)
					$("#fuMoney").text(data.data.fuMoney)
				} else {
					alert("查询明细失败!");
				}
				console.log(data)
			},
			error:function(data){
				alert("查询明细异常!");
			}
		});
	    //返回按钮
	    function backupPage(){
	    	var Index = parent.layer.getFrameIndex(window.name);
	        parent.layer.close(Index);
	    }
	    
	    //打印按钮
	    function printing(){
	        bdhtml = window.document.body.innerHTML;
	        phtnl = window.document.getElementById("printinghtml").innerHTML;
	        window.document.body.innerHTML = phtnl; //把需要打印的指定内容赋给big
	        window.print(); //调用浏览器的打印功能打印指定区域
	        window.document.body.innerHTML=bdhtml; // 最后还原页面
	    }
	</script>
</html>
